<template>
  <div>
    <el-card>
      <div slot="header">
        <my-breadcrumb>粉丝管理</my-breadcrumb>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="hTabClick">
        <el-tab-pane label="列表" name="list">
          <!-- 列表的内容 -->
          <div class="fans_list">
            <div class="fans_item" v-for="fansItem in fans" :key="fansItem.id.toString()">
              <!-- 头像组件 https://element.eleme.io/#/zh-CN/component/avatar -->
              <el-avatar
                :size="80"
                :src="fansItem.photo"
              ></el-avatar>
              <p>{{fansItem.name}}</p>
              <el-button type="primary" size="small">+关注</el-button>
            </div>
          </div>
          <!-- 列表分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="per_page"
            @current-change="hPageChange"
            :total="total_count"
            :disabled="isLoading"
          >
          </el-pagination>
          <!-- /列表分页 -->
        </el-tab-pane>

        <el-tab-pane label="画像" name="echarts">
            <div id="main" style="width: 600px;height:400px;"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data () {
    return {
      fans: [], // 粉丝数据
      page: 1, // 页码
      per_page: 20, // 每页的数量
      total_count: 0, // 总页码
      isLoading: false,
      activeName: 'list'
    };
  },
  methods: {
    buildParams () {
      const params = {
        page: this.page,
        per_page: this.per_page
      };
      return params;
    },
    async getFansList () {
      this.isLoading = true
      try {
        const res = await this.$axios({
          url: '/mp/v1_0/followers',
          method: 'GET',
          params: this.buildParams()
        })
        console.log(res);
        this.isLoading = false
        this.fans = res.data.data.results
      } catch (err) {
        console.log(err);
        this.isLoading = false
      }
    },
    // 点击分页器回调
    hPageChange (curpage) {
      this.page = curpage;
      // 重新请求数据
      this.getFansList();
    },
    hTabClick (obj) {
      if (obj.name === 'echarts') {
        // 去画图
        this.draw()
      }
    },
    buildDate (res) {
      // 将返回数据中年龄对象的所有键拿出来放到数组里
      let xDate = Object.keys(res.data.data.data.age)
      // 将每个数组元素进行重新处理，字符串替换（le替换成小于，gt替换成大于）
      xDate = xDate.map(item => item.replace('le', '小于').replace('gt', '大于'))
      // 将返回数据中年龄对象的所有键值拿出来放到数组里
      const yDate = Object.values(res.data.data.data.age)
      return { xDate, yDate }
    },
    async draw () {
      try {
        var res = await this.$axios({
          url: 'https://www.fastmock.site/mock/057271b6edb6df654e7a323562e59a90/hmpc/fansdraw',
          method: 'GET'
        })
        console.log(res);
      } catch (err) {
        console.log(err);
      }
      const { xDate, yDate } = this.buildDate(res)
      console.log(xDate, yDate);
      const dom = echarts.init(document.getElementById('main'));
      // echars配置对象
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: xDate
        //   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'line',
          data: yDate
        //   data: [5, 20, 36, 10, 10, 20]
        }]
      }
      // 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
      dom.setOption(option);
    }
  },
  created () {
    this.getFansList()
  }
};
</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>
